<template>
  <div class="pui-cascader">
    <div class="pui-cascader_popper">
      <pui-popper theme="light" @onClose="clickOutsideHandle" @onOpen="toggleOpen" :placement="placement" :disabled="disabled">
        <slot></slot>
        <template #popper>
          <div class="pui-cascader_content">
            <div class="pui-cascader_list">
              <div
                :class="['pui-cascader_item', componentRef.firstActiveIdx === i && 'active-item']"
                v-for="(item, i) in dataList"
                :key="item.value"
                @click="firstClick(item, i)"
              >
                <span class="label">
                  <pui-icon :class="fIconName(i, item) === 'null' && 'null'" :name="fIconName(i, item)"></pui-icon>
                  {{ item.label }}
                </span>
                <pui-icon name="arrow-right" v-if="item.children && item.children.length > 0"></pui-icon>
              </div>
            </div>
            <div
              :class="['pui-cascader_list', componentRef.trdDataList.length > 0 && 'is-third']"
              v-if="componentRef.secDataList.length > 0"
            >
              <div
                :class="['pui-cascader_item', componentRef.secActiveIdx === i && 'active-item']"
                v-for="(item, i) in componentRef.secDataList"
                :key="item.value"
                @click="secondClick(item, i)"
              >
                <span class="label">
                  <pui-icon :class="sIconName(i, item) === 'null' && 'null'" :name="sIconName(i, item)"></pui-icon>
                  {{ item.label }}
                </span>
                <pui-icon name="arrow-right" v-if="item.children && item.children.length > 0"></pui-icon>
              </div>
            </div>
            <div class="pui-cascader_list" v-if="componentRef.secDataList.length > 0 && componentRef.trdDataList.length > 0">
              <div
                :class="['pui-cascader_item', componentRef.trdActiveIdx === i && 'active-item']"
                v-for="(item, i) in componentRef.trdDataList"
                :key="item.value"
                @click="thirdClick(item, i)"
              >
                <span class="label">
                  <pui-icon :class="tIconName(i) === 'null' && 'null'" :name="tIconName(i)"></pui-icon>
                  {{ item.label }}
                </span>
              </div>
            </div>
          </div>
        </template>
      </pui-popper>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'pui-cascader',
});
</script>

<script lang="ts" setup>
import { reactive } from 'vue';
import type { Props, ComponentValue } from './interface';
withDefaults(defineProps<Props>(), {
    modelValue: '',
    size: 'normal',
    placement: 'bottom',
    type: 'select',
    disabled: false,
    clearAble: false,
});

const emits = defineEmits<{
  (e: 'update:modelValue', val: object): void;
}>();

const componentRef = reactive<ComponentValue>({
  isShow: false,
  selectedVal: '',
  selectedText: '请选择',
  firstActiveIdx: -1,
  secActiveIdx: -1,
  trdActiveIdx: -1,
  secDataList: [],
  trdDataList: [],
});

const onSelectHandle = (item: any) => {
  componentRef.selectedText = item.label;
  componentRef.selectedVal = item.value;
  emits('update:modelValue', item);
};
const toggleOpen = () => {
  componentRef.isShow = !componentRef.isShow;
};
const clickOutsideHandle = () => {
  componentRef.isShow = false;
};
const clearModelValue = () => {
  emits('update:modelValue', {
    value: '',
    label: '',
  });
};
const firstClick = (data: any, index: number) => {
  componentRef.firstActiveIdx = componentRef.firstActiveIdx === index ? -1 : index;
  if (!data.children || (data.children && data.children.length === 0) || componentRef.secDataList === data.children) {
    componentRef.secDataList = [];
    componentRef.trdDataList = [];
    componentRef.secActiveIdx = -1;
    componentRef.trdActiveIdx = -1;
    return;
  }
  componentRef.secDataList = data.children;
};
const secondClick = (data: any, index: number) => {
  componentRef.secActiveIdx = componentRef.secActiveIdx === index ? -1 : index;
  if (!data.children || (data.children && data.children.length === 0) || componentRef.trdDataList === data.children) {
    componentRef.trdDataList = [];
    componentRef.trdActiveIdx = -1;
    return;
  }
  componentRef.trdDataList = data.children;
};
const thirdClick = (data: any, index: number) => {
  componentRef.trdActiveIdx = componentRef.trdActiveIdx === index ? -1 : index;
};
const fIconName = (i: number, data: any) => {
  return componentRef.firstActiveIdx === i && data.children && data.children.length > 0
    ? 'minus'
    : componentRef.firstActiveIdx === i && (!data.children || (data.children && data.children.length === 0))
    ? 'check'
    : 'null';
};
const sIconName = (i: number, data: any) => {
  return componentRef.secActiveIdx === i && data.children && data.children.length > 0
    ? 'minus'
    : componentRef.secActiveIdx === i && (!data.children || (data.children && data.children.length === 0))
    ? 'check'
    : 'null';
};
const tIconName = (i: number) => {
  return componentRef.trdActiveIdx === i ? 'check' : 'null';
};
</script>
